import React, { Component } from 'react';
import { getTuijianmv } from '../../utils/api';
import '../../style/all.css';
import './Zuixinmv.css';

export default class Zuixinmv extends Component {
	state = {
		// mv数组
		mvList: []
	}
	componentDidMount () {
		window.scroll(0, 0);
		this.getZuixinMvs();
	}
	// 获取mv数据
	async getZuixinMvs () {
		const mvs = await getTuijianmv();
		this.setState({
			mvList: mvs.data
		})
	}
	render () {
		let { mvList } = this.state;
		return (
			<div className='mv main'>
				<div className='mv_content'>
					<ul className='mv_box'>
						{mvList.map((item) => (
							<li key={item.mvid} onClick={() => { this.props.history.push(`/index/mvdetail?id=${item.mvid}`) }} className='perse25'>
								<div className='img tophover'>
									<img width='100%' height='100%' src={"http://localhost:3001/" + item.mv_pic_url} alt="" />
									<div className='gd_mv_hover'></div>
								</div>
								<p>{item.mv_name}<br /><span>{item.singer_name}</span></p>
							</li>
						))}
					</ul>
				</div>
			</div>
		)
	}
}
